<!--搜索列表组件-->
<template>
  <div id="searchList">
    <div v-for="(card, idx) in filteredCards" :key="idx" class="search-item">
      <img :src="card.logo" :alt="card.title" class="card-logo" />
      <div class="header-right">
        <span class="card-info card-title">{{ card.title }}</span>
        <span class="card-info card-desc">{{ card.desc }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { Card } from "@/consts";

defineProps<{
  filteredCards: Card[];
}>();
</script>

<style scoped>
#searchList {
  width: 100%;
  height: 270px;
  overflow-y: auto;
  padding: 0 10px;
}
.search-item {
  width: 100%;
  background: white;
  border-radius: 14px;
  padding: 16px;
  border: 1px solid #eee;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.search-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card-logo {
  width: 44px;
  height: 44px;
  margin-right: 14px;
}
.header-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
.card-desc {
  color: #666;
  line-height: 1.4;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
